<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css" >
    <link rel="stylesheet" href="/static/css/head.css" >
    <link rel="stylesheet" href="/static/css/release_goods.css" >
    <link rel="stylesheet" href="/static/css/file.css" >
    <style>
        .error-message {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="nav_head">
        {%if request.session.username|default:'' != ''%}
        <P>欢迎您，{{ request.session.username }}</P>
        <button class="btn btn-default"><a href="/user/logout" >退出</a></button>
        {%else%}
        <a class="btn btn-link"  href="/user/login" >登陆</a>
        <a class="btn btn-link"  href="/user/register" >注册</a>
        {%endif%}
        <div class="nav dropdown">
            <a class="btn btn-link" href="/user/user_center">| 用户中心</a>
        </div>
        <div class="nav">
            <a class="btn btn-link"  href="/" >首页</a>
        </div>
    </div>
    <div class="title">
        <img src="/static/img/title.png">
        <div class="second_title">
            <div class="find">
                <input type="text" class="form-control" id="search" >
                <a type="button" class="btn btn-warning" id="search-button" href="javascript:void(0);" onclick="go_search()">
                <span class="glyphicon glyphicon-search"></span>
                </a>
                <button type="button" class="btn btn-warning"><a href="/release_goods">发布闲置</a></button>
            </div>
        </div>      
    </div>
    <!-- 返回最上开始 -->
    <div class="back_to_top">
        <a href="#"><img src="/static/img/index-回到最上.png"></a>
    </div>
    <!-- 返回最上结束 -->
    <div class="release">
        <p class="text-center">发布闲置</p>
        <hr>
        <form id="releaseForm" method="post" action="/release/" enctype="multipart/form-data">
            {% csrf_token %}
            <ol>
                <li>
                    <p>商品名称</p>
                    <input type="text" id="title" name="title"/>
                    <span id="titleError" class="error-message"></span>
                </li>
                <li>
                    <p>商品分类</p>
                    <select class="input-lg" id="type" name="type">
                        <option selected value="books">闲置书籍</option>
                        <option value="digital">数码电子</option>
                        <option value="cloth">鞋服佩饰</option>
                        <option value="daily">日用物品</option>
                        <option value="traffic">出行交通</option>
                        <option value="other">其他闲置</option>
                    </select>
                    <span id="typeError" class="error-message"></span>
                </li>
                <li>
                    <p>期望成交价</p>
                    <input type="text" id="price" name="price"/>
                    <span id="priceError" class="error-message"></span>
                </li>
                <li>
                    <p>交易地点</p>
                    <input type="text" id="address" name="address"/>
                    <span id="addressError" class="error-message"></span>
                </li>
                <li>
                    <p>商品图片</p>
                    <input type="file" id="inputfile" name="picture">
                    <span id="pictureError" class="error-message"></span>
                </li>
                <li>
                    <P>详细描述</P>
                    <textarea rows="15" id="description" name="description"></textarea>
                    <span id="descriptionError" class="error-message"></span>
                </li>
            </ol>
            <input type="submit" class="tijiao btn btn-default" style="width: 100px" value="提交">
        </form>
    </div>

    <script src="/static/js/jquery-3.3.1.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/file.js"></script>
    <script>
        document.getElementById('releaseForm').addEventListener('submit', function(event) {
            let isValid = true;

            // 清除之前的错误信息
            document.querySelectorAll('.error-message').forEach(function(el) {
                el.textContent = '';
            });

            // 检查商品名称
            const title = document.getElementById('title').value.trim();
            if (!title) {
                document.getElementById('titleError').textContent = '商品名称不能为空';
                isValid = false;
            }

            // 检查商品分类
            const type = document.getElementById('type').value.trim();
            if (!type) {
                document.getElementById('typeError').textContent = '商品分类不能为空';
                isValid = false;
            }

            // 检查期望成交价
            const price = document.getElementById('price').value.trim();
            if (!price) {
                document.getElementById('priceError').textContent = '期望成交价不能为空';
                isValid = false;
            }else if (isNaN(price)) {
                document.getElementById('priceError').textContent = '期望成交价必须是数字';
                isValid = false;
            }

            // 检查交易地点
            const address = document.getElementById('address').value.trim();
            if (!address) {
                document.getElementById('addressError').textContent = '交易地点不能为空';
                isValid = false;
            }

            // 检查商品图片
            const picture = document.getElementById('inputfile').value.trim();
            if (!picture) {
                document.getElementById('pictureError').textContent = '商品图片不能为空';
                isValid = false;
            }

            // 检查详细描述
            const description = document.getElementById('description').value.trim();
            if (!description) {
                document.getElementById('descriptionError').textContent = '详细描述不能为空';
                isValid = false;
            }

            // 如果表单无效，阻止提交
            if (!isValid) {
                event.preventDefault();
            }
        });
    </script>
    {% include 'includes/websocket.html' %}
</body>
</html>